<template>
  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" title="上传" :width="720" top="calc(50vh - 210px)">
    <div class="import-dialog">
      <el-upload
        class="upload-demo"
        drag
        :action="actionUrl"
        :headers="headers"
        accept=".xlsx,.xls"
        multiple
        :on-success="handleSuccess"
        :on-error="handleError"
      >
        <el-icon><UploadFilled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip">
          1、文件大小限制10Mb；<br />
          2、每次上传数据限制5000行；<br />
          3、支持扩展名：.xlsx
        </div>
      </el-upload>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleDownload"> 下载模版 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import Cookies from 'js-cookie'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['change'])
const actionUrl = `/api-parking/system/oss/upload`
const headers = { Authorization: Cookies.get(process.env.envConfig.TOKEN) }
const communityId = ref('')
const handleSuccess = async (msg) => {
  console.log('--msg', msg)
  if (msg.code !== 200) {
    ElMessage({
      type: 'error',
      message: msg.msg,
    })
    colse()
    return
  }
  const params = {
    fileUrl: msg.data.url,
    communityId: communityId.value,
    updateSupport: false, // 是否更新已存在的业主信息
  }
  try {
    await $request.post('/api-parking/parking/owner/import', { params })
    emits('change')
    ElMessage({
      type: 'success',
      message: `导入成功!`,
    })
    colse()
  } catch (err) {
    ElMessage({
      type: 'error',
      message: err.msg || '导入失败，请稍后再试',
    })
  }
}
const handleError = (err) => {
  console.log('err')

  ElMessage({
    type: 'error',
    message: `导入失败!`,
  })
  colse()
}

// 下载地址
const handleDownload = () => {
  window.open(
    'https://zkkj-hz.oss-cn-hangzhou.aliyuncs.com/ftparks/tmp/%E4%B8%9A%E4%B8%BB%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx'
  )
}

const dialogVisible = ref(false)
const open = (val) => {
  communityId.value = val
  dialogVisible.value = true
}
const colse = () => {
  dialogVisible.value = false
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.import-dialog {
  height: 291px;
}
.upload-demo {
  width: 100%;
  margin-bottom: 12px;
  .el-icon {
    font-size: 140px;
  }
}
</style>
